"use client"

import { useState } from "react"
import { ArrowLeft, Heart, Share2, TrendingUp, Clock, Wine } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useRouter } from "next/navigation"
import Image from "next/image"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// 示例数据
const initialCocktails = [
  {
    id: 1,
    title: "夏日莓果特调",
    image: "/placeholder.svg?height=400&width=300",
    author: "调酒师小王",
    likes: 1562,
    hasLiked: false,
    createdAt: "2024-02-21",
  },
  {
    id: 2,
    title: "薄荷莫吉托",
    image: "/placeholder.svg?height=500&width=300",
    author: "调酒师小李",
    likes: 2341,
    hasLiked: true,
    createdAt: "2024-02-20",
  },
  {
    id: 3,
    title: "蓝色珊瑚礁",
    image: "/placeholder.svg?height=450&width=300",
    author: "调酒师小张",
    likes: 891,
    hasLiked: false,
    createdAt: "2024-02-19",
  },
  {
    id: 4,
    title: "金色日落",
    image: "/placeholder.svg?height=480&width=300",
    author: "调酒师大明",
    likes: 1234,
    hasLiked: false,
    createdAt: "2024-02-18",
  },
  {
    id: 5,
    title: "紫色迷情",
    image: "/placeholder.svg?height=420&width=300",
    author: "调酒师小红",
    likes: 1789,
    hasLiked: true,
    createdAt: "2024-02-17",
  },
]

export default function PublicCabinetPage() {
  const router = useRouter()
  const [cocktails, setCocktails] = useState(initialCocktails)
  const [sortBy, setSortBy] = useState("popular") // 'popular' or 'recent'

  const handleLike = (id: number) => {
    setCocktails(
      cocktails.map((cocktail) => {
        if (cocktail.id === id) {
          return {
            ...cocktail,
            likes: cocktail.hasLiked ? cocktail.likes - 1 : cocktail.likes + 1,
            hasLiked: !cocktail.hasLiked,
          }
        }
        return cocktail
      }),
    )
  }

  const sortedCocktails = [...cocktails].sort((a, b) => {
    if (sortBy === "popular") {
      return b.likes - a.likes
    }
    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
  })

  return (
    <div className="min-h-screen bg-[#f9f8f6]">
      {/* Header */}
      <div className="fixed top-0 left-0 right-0 bg-white border-b z-10">
        <div className="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Button variant="ghost" size="icon" onClick={() => router.push("/")} className="mr-2">
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <h1 className="text-lg font-medium">大家的酒柜</h1>
          </div>
          <div className="flex items-center gap-4">
            <Button variant="outline" className="gap-2" onClick={() => router.push("/cabinet")}>
              <Wine className="w-4 h-4" />
              <span>我的酒柜</span>
            </Button>
            <Select value={sortBy} onValueChange={setSortBy}>
              <SelectTrigger className="w-[140px]">
                <SelectValue placeholder="排序方式" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="popular">
                  <div className="flex items-center gap-2">
                    <TrendingUp className="w-4 h-4" />
                    <span>最受欢迎</span>
                  </div>
                </SelectItem>
                <SelectItem value="recent">
                  <div className="flex items-center gap-2">
                    <Clock className="w-4 h-4" />
                    <span>最新发布</span>
                  </div>
                </SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-5xl mx-auto px-4 pt-20">
        <div className="columns-1 sm:columns-2 lg:columns-3 gap-4 space-y-4">
          {sortedCocktails.map((cocktail) => (
            <div
              key={cocktail.id}
              className="break-inside-avoid bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300"
            >
              <div className="relative aspect-[3/4]">
                <Image src={cocktail.image || "/placeholder.svg"} alt={cocktail.title} fill className="object-cover" />
              </div>
              <div className="p-4 space-y-2">
                <div className="flex items-center justify-between">
                  <h3 className="font-medium">{cocktail.title}</h3>
                  <p className="text-sm text-gray-500">{cocktail.author}</p>
                </div>
                <div className="flex items-center justify-between">
                  <Button
                    variant="ghost"
                    size="sm"
                    className={`gap-1 ${cocktail.hasLiked ? "text-red-500" : "text-gray-500"}`}
                    onClick={() => handleLike(cocktail.id)}
                  >
                    <Heart className={`w-4 h-4 ${cocktail.hasLiked ? "fill-current" : ""}`} />
                    <span>{cocktail.likes}</span>
                  </Button>
                  <Button variant="ghost" size="sm" className="text-gray-500">
                    <Share2 className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

